<template>
  <div class="about" ref="page">
    <h1>This is an about page</h1>
    <div ref="item" style="position: absolute; top: 0; left: 0; display: none">
      <p>x:{{ weizhi.x }}</p>
      y:{{ weizhi.y }}
    </div>
  </div>
</template>

<script setup>
import { onMounted } from "@vue/runtime-core";

import { ref } from "vue";

const page = ref(null);

const item = ref(null);
const weizhi = ref({
  x: 0,
  y: 0,
});
onMounted(() => {
  page.value.addEventListener("touchstart", function (e) {
    var touch;
    if (e.touches) {
      touch = e.touches[0];
    } else {
      touch = e;
    }
    var x = touch.pageX + 20;
    var y = touch.pageY - 30;
    weizhi.value.x = x;
    weizhi.value.y = y;
    item.value.style.top = y + "px";
    item.value.style.left = x + "px";

    item.value.style.display = "block";
  });
  page.value.addEventListener("touchmove", function (e) {
    var touch;
    if (e.touches) {
      touch = e.touches[0];
    } else {
      touch = e;
    }
    var x = touch.pageX + 20;
    var y = touch.pageY - 30;
    weizhi.value.x = x;
    weizhi.value.y = y;
    item.value.style.top = y + "px";
    item.value.style.left = x + "px";
    console.log(x, y);
  });
  page.value.addEventListener("touchend", function (e) {
    item.value.style.display = "none";
  });
});
</script>

<style scoped>
.about {
  overflow: hidden;
}
</style>